

<script>
  import Navbar from './components/navbar.vue';
  import BookShelf from './components/book_shelf.vue'
  import BookSearch from './components/book_search.vue'
  import BookLibaray from './components/book_library.vue'
  import BookDownload from './components/book_download.vue'
  export default{
    data(){
      return{
        message:'heelo',
        cur_tab_index:3,
      }
    },
    methods:{
      nav_to(index){
        console.log(index)
        this.cur_tab_index=index
      },
      get_books() {
            const api = "http://127.0.0.1:9999/books"
            fetch(api)
                .then(res => res.json())
                .then(data => {
                    log('get book count:' + data.length)
                    this.books = data
                })
        },
    },
    components:{
      'navbar':Navbar,
      'shelf':BookShelf,
      'search':BookSearch,
      'libaray':BookLibaray,
      'downloader':BookDownload,
    }
  }
</script>

<template>
  <div class="container">
    <div class="side panel">
      <navbar @navigateTo="nav_to" :default="cur_tab_index"></navbar>
    </div>
    <div class="main panel">
      <search v-if="cur_tab_index==1"></search>
      <libaray v-if="cur_tab_index==2"></libaray>
      <downloader v-if="cur_tab_index==3"></downloader>
    </div>
  </div>
</template>

<style lang="scss">
  body{
    padding: 0;
    margin: 0;
    font-size: 16px;
    background-color: #000;
    color: aliceblue;
    width: 100vw;
    height: 100vh;
  }
  .container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 200px 1fr;
    overflow: hidden;
  }
  .panel{
    background-color: #333;
    margin: 10px;
    border-radius: 10px;
    height: calc(100vh - 20px);
  }

  
</style>
<style lang="scss">

a.btn {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    // font-size: 1.2rem;
    border: 1px solid darkcyan;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: 600;
    text-shadow: none;
    color:aliceblue;
    text-decoration: none;
    &:hover {
        background-color: darkcyan;
        color: #333;
    }
}
.btn.danger {
    border-color: deeppink;
    &:hover {
        background-color: deeppink;
    }
}

input[type=text] {
    height: 30px;
    width: 400px;
    border: 1px solid darkcyan;
    background-color: transparent;
    border-radius: 30px;
    text-align: center;
    font-size: 1.4rem;
    outline: none;
    color: aliceblue;
    &:focus {
        box-shadow: 0 0 5px 5px darkcyan;
    }
}
</style>